<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section class="card" v-for="item in list" :key="item.comic_id">
            <van-image :src="proxyImageUrl(item.img)" class="cover" @click="goToDetail(item.comic_id)"></van-image>
            <div class="info">
                <div class="title-style">
                    <h2 class="title">{{ item.title }}</h2>
                    <span class="style">
                        <van-tag color="#c0c0c029" text-color="#90959b" v-for="style in item.styles" :key="style.id">{{
                            style.name }}</van-tag>
                    </span>
                </div>
                <div class="sub">
                    <div class="sub_title">{{ item.sub_title }}</div>
                    <div class="comment_total">
                        <van-icon name="comment-o" />{{ comments(item.comment_total) }}w
                    </div>
                </div>
            </div>
        </section>
    </van-list>
</template>
<script setup>
import { proxyImageUrl } from "@/tool/index"
import { ref, onMounted, inject } from 'vue'
import { fetchHomeRecommend } from '@/api/index'
import { useRouter } from "vue-router"
const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const list = ref([])

const registerComponentLoad = inject('registerComponentLoad', () => { })
let hasNotified = false

const comments = (comment_total) => {
    return (comment_total / 10000).toFixed(2)
}

const getHomeRecommend = async () => {
    loading.value = true
    try {
        // console.log("开始加载HomeRecommend数据")
        const res = await fetchHomeRecommend()
        // console.log("HomeRecommend响应:", res)
        if (res.code === 0) {
            list.value.push(...res.data.list)
            //  console.log("HomeRecommend数据加载成功，数量:", res.data.list.length)
            // 首次加载完成后通知
            if (!hasNotified) {
                hasNotified = true
                console.log("HomeRecommend首次加载完成通知")
                registerComponentLoad()
            }
        } else {
            console.log("HomeRecommend数据加载失败，code:", res.code)
            if (!hasNotified) {
                hasNotified = true
                registerComponentLoad()
            }
        }
    } catch (error) {
        console.error("HomeRecommend加载失败:", error)
        if (!hasNotified) {
            hasNotified = true
            registerComponentLoad()
        }
    } finally {
        loading.value = false
    }
}
onMounted(() => {
    getHomeRecommend()
})
const onLoad = () => {
    console.log("执行了onload")
    getHomeRecommend()
};
const goToDetail = (id) => {
    router.push({ path: `/detail/${id}` })
};
</script>
<style scoped lang="scss">
.card {
    margin-bottom: 20px;

    .cover {
        width: 100%;
    }

    .info {
        display: flex;
        flex-direction: column;
        margin-top: 10px;

        .title-style {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 5px;

            .title {
                margin: 0 5px 0 0;
                color: #212121;
                font-size: 18px;
                font-weight: 400;
            }

            .style {}
        }

        .sub {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #999;
            font-size: 14px;

            .sub_title {}

            .comment_total {}
        }
    }
}
</style>